<template>
    <div class="flexbox com_box height_100">
        <AddAuth />
        <EditAuth />
        <div class="access_left">
            <div class="access_header flexbox flexcenter flexbetween">
                <span class="access_title">权限组</span>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addAuth" class="add_access" circle></el-button>
            </div>
            <ul class="access_menu_box">
                <li class="flexbox flexcenter flexbetween access_menu" :class="{active:curActive==index}" v-for="(item,index) in authList" :key="index" @click="changeAuth(item,index)">
                    <div class="flexbox flexcenter">
                        <img src="../../assets/img/per_icon.svg" alt="" class="per_icon">
                        <span class="per_text">{{item.title}}</span>
                    </div>
                    <el-tooltip class="item" effect="dark" content="重命名" placement="top">
                        <div class="icon_btn flexbox flexcenter per_img" @click.stop="editAuth(item)"><img src="../../assets/img/edit_icon.svg" alt=""></div>
                    </el-tooltip>
                </li>
            </ul>
        </div>
        <div class="access_right">
            <div class="access_box flexbox flexcolumn">
                <div class="access_header flexbox flexcenter flexbetween">
                    <span class="access_title">权限配置</span>
                    <el-switch @change="setDataStatus" v-model="status" :active-value="1" :inactive-value="0">
                    </el-switch>
                </div>
                <div class="access_center flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="access_list" v-for="(item,index) in perList" :key="index">
                        <div class="flexbox flexcenter flexbetween">
                            <div class="access_name">{{item.title}}</div>
                            <el-checkbox class="all_check" :disabled='status==0?true:false' :indeterminate="item.isIndeterminate" v-model="item.isCheck" @change="handleCheckAllChange(item.isCheck,index)">全选</el-checkbox>
                        </div>
                        <div class="access_item" v-for="(sed,indexs) in item.data" :key="indexs">
                            <div class="access_text">{{sed.title}}</div>
                            <el-checkbox-group v-model="sed.node" class="access_check" @change="handleCheckedCitiesChange(sed.node,index)">
                                <el-checkbox :disabled='status==0?true:false' :label="check.node" v-for="(check,indext) in sed.data" :key="indext">{{check.title}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
                <div class="access_btn flexbox flexcenter">
                    <el-button class="el-button-width" type="primary" size="small" :disabled='disable || status==0' :loading="disable" @click="savePermiss">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import AddAuth from "./AddAuth.vue";
import EditAuth from "./EditAuth.vue";
export default {
    name: "",
    data() {
        return {
            curActive: 0,
            disable: false,
            loading: false,
            authList: [], //角色列表
            perList: [], //权限列表
            queryInfo: {
                auth_node: [],
                auth_id: "",
            },
            status: null,
        };
    },
    created() {
        this.getAuthList();
    },
    methods: {
        //获取角色列表
        async getAuthList() {
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/user_auth_list"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.authList = res.data.list;
                let auth_id = res.data.list[0].id;
                this.queryInfo.auth_id = auth_id;
                this.status = res.data.list[0].status;
                this.getpermissions(this.queryInfo.auth_id);
            }
        },
        //获取角色列表
        async getAuthList2() {
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/user_auth_list"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.authList = res.data.list;
            }
        },

        // 添加角色
        addAuth() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addAuth", attr);
        },

        // 编辑角色
        editAuth(item) {
            const attr = {
                info: item,
                dialogVsb: true,
            };
            this.$bus.emit("editAuth", attr);
        },

        //获取角色列表
        async getpermissions(auth_id) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/auth",
                {
                    auth_id: auth_id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data.list) {
                    res.data.list[i].checkedData = [];
                    res.data.list[i].indetData = [];
                    for (let a in res.data.list[i].data) {
                        res.data.list[i].checkedData.push.apply(
                            res.data.list[i].checkedData,
                            res.data.list[i].data[a].data.map((item) => {
                                return item.node;
                            })
                        );
                        res.data.list[i].indetData.push.apply(
                            res.data.list[i].indetData,
                            res.data.list[i].data[a].node
                        );
                    }
                    res.data.list[i].isIndeterminate =
                        res.data.list[i].indetData.length > 0 &&
                        res.data.list[i].indetData.length <
                            res.data.list[i].checkedData.length;

                    res.data.list[i].isCheck =
                        res.data.list[i].indetData.length ===
                        res.data.list[i].checkedData.length;
                }
                this.perList = res.data.list;
                this.loading = false;
            }
        },

        // 角色筛选
        changeAuth(item, index) {
            this.queryInfo.auth_id = item.id;
            this.getpermissions(item.id);
            this.status = item.status
            this.curActive = index;
        },

        // 打开关闭状态
        async setDataStatus() {
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/user_auth_status",
                {
                    id: this.queryInfo.auth_id,
                    status: this.status,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功！",
                    type: "success",
                });
                this.getAuthList2()
            }
        },

        // 全选
        handleCheckAllChange(val, index) {
            let arr = this.perList[index].data;
            if (val) {
                for (let i in arr) {
                    arr[i].node = arr[i].data.map((item) => {
                        return item.node;
                    });
                }
            } else {
                for (let i in arr) {
                    arr[i].node = [];
                }
            }
            this.perList[index].isIndeterminate = false;
        },

        // 多选框
        handleCheckedCitiesChange(val, index) {
            let arr = this.perList[index].data;
            let allData = this.perList[index].checkedData;
            let hasCheck = [];
            for (let i in arr) {
                hasCheck.push.apply(hasCheck, arr[i].node);
            }
            this.perList[index].isCheck = hasCheck.length === allData.length;
            this.perList[index].isIndeterminate =
                hasCheck.length > 0 && hasCheck.length < allData.length;
        },

        // 保存权限
        async savePermiss() {
            let auth_node = [];
            for (let i in this.perList) {
                for (let a in this.perList[i].data) {
                    auth_node.push.apply(
                        auth_node,
                        this.perList[i].data[a].node
                    );
                }
            }
            this.queryInfo.auth_node = auth_node;
            this.disable = true;
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/auth_edit",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.disable = false;
                return;
            } else {
                this.disable = false;
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.getpermissions(this.queryInfo.auth_id);
            }
        },
    },
    components: {
        AddAuth,
        EditAuth,
    },
};
</script>


<style scoped>
.access_left {
    width: 292px;
    border-right: 1px solid #ebebeb;
}
.access_right {
    flex: 1;
}
.add_access {
    padding: 6px !important;
}
.access_header {
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #ebebeb;
}
.access_title {
    font-size: 16px;
    color: #17233d;
}
.per_text {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.per_img {
    display: none;
}
.access_menu_box {
    overflow-y: auto;
    height: calc(100% - 61px);
}
.access_menu {
    height: 48px;
    padding-left: 22px;
    padding-right: 25px;
    cursor: pointer;
}
.access_menu:hover,
.access_menu.active {
    background-color: #f6f8ff;
}
.access_menu:hover .per_img {
    display: block;
}
.access_center {
    overflow-y: auto;
}
.access_btn {
    height: 72px;
    padding: 0 20px;
    box-shadow: 0px -2px 11px rgba(213, 210, 210, 0.23);
}
.access_box {
    height: 100%;
}
.access_center {
    padding: 0 20px;
}

.access_list {
    padding: 25px 0;
}
.access_name {
    font-size: 14px;
    color: #17233d;
    padding-left: 10px;
    position: relative;
}
.access_name::after {
    content: "";
    position: absolute;
    height: 12px;
    width: 2px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.access_item {
    margin-top: 17px;
}
.access_text {
    font-size: 13px;
    color: #616c85;
    height: 22px;
    line-height: 22px;
}
.access_check .el-checkbox {
    margin-top: 22px;
    margin-right: 0px;
    width: 15%;
}
</style>

<style>
.all_check .el-checkbox__label {
    font-size: 12px;
    line-height: 14px;
}
</style>

